<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: common_header(~{::title})">
    <title >商品管理-拼多多</title>
</head>
<body th:replace="layout :: common_body(~{::div.layui-body})">
   
<div class="layui-body" style="padding:15px;">
    <style>
        .red{color: red;}
        .yinc{display: none;} 
    </style>
    <div class="layui-tab layui-tab-brief" lay-filter="demo">
        <ul class="layui-tab-title">
            <ul class="layui-tab-title">
                <li th:if="${shopType == 5}"><a href="/pdd/dashboard">店铺首页</a></li>
                <li th:if="${shopType == 4}"><a href="/tao/dashboard">店铺首页</a></li>
                <li th:if="${shopType == 6}"><a href="/douyin/dashboard">店铺首页</a></li>
                <li class="layui-this">网店商品管理</li>
                <li><a th:href="@{/goods/publish_list}">商品网店发布记录</a></li>
<!--                <li><a th:href="@{/goods/list}">ERP商品管理</a></li>-->
                <!-- <li><a th:href="@{/tao/goods_list(shopId=6)}">淘宝商品管理</a></li>
                <li><a th:href="@{/douyin/goods_list(shopId=22)}">抖店商品管理</a></li> -->
            </ul>
        </ul>
    </div>

    <!-- content starts -->
<!--    <blockquote class="layui-elem-quote">订单总览</blockquote>-->

    <fieldset class="layui-elem-field">
        <legend>按条件搜索</legend>
        <div class="layui-field-box">
            <form class="layui-form layui-form-pane1" method="get" action="/shop/goods_list">
                <input type="hidden" name="shopType" th:value="${shopType}" />
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <input type="text" name="goodsNum" th:value="${goodsNum}" placeholder="商品编码" style="width: 200px;" class="layui-input">
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select name="shopId" id="shopId">
                                <option value="0" selected>请选择店铺</option>
                                <option  th:each="item: ${shops}" th:text="${item.name +' -- '+ item.typeName}" th:value="${item.id}">等待发货</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select name="isOnsale" id="isOnsale">
                                <option value="1">已上架</option>
                                <option value="0">已下架</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button type="submit" class="layui-btn layui-btn-normal">搜索</button>
                        <i>总共：<span style="color: red" th:text="${totalSize}"></span>条记录</i>
                    </div>

                    <div class="layui-inline" th:if="${shopType == 5}">
                        <span id="upd_order" class="layui-btn layui-btn-normal" >更新pdd商品数据</span>
                        <span id="upd_order_" style="display: none;" class="update"><i></i>更新中</span>
                    </div>
                    <div class="layui-inline">
                        <span id="add_goods" class="layui-btn layui-btn-primary" >添加店铺商品</span>
                    </div>
                </div>


            </form>
        </div>
    </fieldset>

    <!-- start dd-wrapper -->
    <link rel="stylesheet" href="/goods/order.css"/>
    <div class="dd-wrapper">
        <table class="dd-table">
            <tr>
               
                <th>平台GoodsId</th>
                <th>店铺</th>
                <th width="80px">主图</th>
                <th>商品标题</th>
                <th>SKU</th>
                <th>累计销量</th>
                <th >成本价</th>
                <th>备注</th>
                <th>状态</th>
                <th>发布时间</th>
            </tr>
            <tr th:each="item:${lists}">
                <!-- <td th:text="${itemStat.index+1}"></td> -->
               
                <td th:text="${item.getGoodsId()}"></td>
                <td>
                    <b th:if="${item.shopType == 4}" style="color: rgb(74, 11, 212);" > <img src="https://img.alicdn.com/tps/i3/T1OjaVFl4dXXa.JOZB-114-114.png" style="width: 20px;height:20px"/></b>
                    <b th:if="${item.shopType == 5}" style="color: rgb(74, 11, 212);" ><img src="https://mms-static.pddpic.com/express/favicon.ico" style="width: 20px;height:20px"/></b>
                    <b th:if="${item.shopType == 6}" style="color: rgb(74, 11, 212);" ><img src="https://lf1-fe.ecombdstatic.com/obj/eden-cn/upqphj/homepage/icon.svg" style="width: 20px;height:20px"/></b>
                    <span  th:text="${item.shopName}"></span>
                </td>
                <td>
                    <div ><img th:src="${item.thumbUrl}" class="pimg" />
                    </div>
                </td>
                <td>
                    <span  th:text="${#strings.abbreviate(item.goodsName,18)}" th:title="${item.goodsName}"></span><br/>
                    <span  th:text="${item.goodsNum}" style="color:#007DDB;"></span>
                    <span th:attr="data-id=${item.id},goodsNum=${item.goodsNum}"  class="goodsNum_upd">
                        <i class="layui-icon layui-icon-edit"></i>
                    </span>
                    <br />
                    ERP GoodsId：<span th:text="${item.erpGoodsId}"></span>
                    <span th:attr="data-id=${item.id}" class="layui-btn-primary layui-btn-xm link_goods" >关联ERP商品</span>
                </td>
                <td>
                    <div>SKU总数：<i style="color: red;" th:text="${item.getSkuList().size()}"></i> &nbsp;&nbsp;<a href="javascript:;" class="show_sku" status="0">显示SKU</a></div>
                    <ul>
                        <li th:each="it:${item.getSkuList()}" class="yinc">
                            <span th:text="${it.spec}"></span><span th:text="${it.erpGoodsSpecCode}" style="color: red;"></span>
                            <span th:if="${it.erpGoodsSpecId == null || it.erpGoodsSpecId == 0}" th:attr="data-id=${it.skuId}" class="layui-btn-primary layui-btn-xm order_send" >关联ERP商品</span>
                        </li>
                    </ul>
                </td>
                
                <td>
                    <span th:text="${item.totalSales}"></span>
                    <span th:attr="data-id=${item.id},totalSales=${item.totalSales}"  class="totalSales_edit">
                        <i class="layui-icon layui-icon-edit"></i>
                    </span>
                </td>
              
                <td><span th:text="${item.costPrice}"></span></td>
                <td>
                    <b th:text="${item.remark}"></b>
                    <i class="layui-icon layui-icon-note goods_remark" th:attr="data-id=${item.id},remark=${item.remark}"></i>
                </td>
                <td>
                    <span th:if="${item.isOnsale == 1}">已上架</span>
                    
                    <span th:if="${item.isOnsale == 0}" style="color: #301ce4;">已下架</span>
                    <span th:if="${item.isOnsale == 1}" class="layui-btn-sm layui-btn-primary isOnsale" th:attr="goodsId=${item.id},isOnsale=${item.isOnsale}">下架</span>
                    <span th:if="${item.isOnsale == 0}" class="layui-btn-sm layui-btn-primary isOnsale" th:attr="goodsId=${item.id},isOnsale=${item.isOnsale}">上架</span>

                </td>
                <td>
                    <b th:text="${item.publishTime}"></b>
                    <span th:attr="data-id=${item.id},publishTime=${item.publishTime}"  class="publishTime_edit">
                        <i class="layui-icon layui-icon-edit"></i>
                    </span>
                </td>
            </tr>
        </table>
    </div>
    <!-- end dd-wrapper -->
    <div class="layui-box layui-laypage layui-laypage-default pageBox">
        <paging:pager th:value="${pageIndex}" th:rows="${totalSize}" th:size="${pageSize}"/>
    </div>

    <div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
        <div id="innerdiv" style="position:absolute;">
            <img id="bigimg" style="border:5px solid #fff;" src="" />
        </div>
    </div>
    
    <script type="text/template" id="send-goods">
        <div class="T-box">
            <p><span>sku编码</span><input type="text" name="express_code"/></p>
            <p class="T-result"><span>&nbsp;</span><em id="erro"></em></p>
        </div>
    </script>
    <script type="text/javascript" src="/goods/Tips/Tips.min.js"></script>
    <script type="text/javascript">
        var layer;
        var $;
        var windowOpen;
        layui.use(['laydate', 'jquery', 'form', 'layer'], function () {
            var laydate = layui.laydate;
            $ = layui.jquery;
            var form = layui.form;
            layer = layui.layer;
            laydate.render({
                elem: '#startTime'
                ,type: 'datetime'
            });
            laydate.render({
                elem: '#endTime'
                ,type: 'datetime'
            });
            $(function () {
                var isOnsale = '[[${isOnsale}]]';
                $("#isOnsale").val(isOnsale);
                $("#shopId").val('[[${shopId}]]');
                //form.render(); //更新全部
                form.render('select'); //刷新select选择框渲染

                $(".pimg").click(function(){
                    var _this = $(this);//将当前的pimg元素作为_this传入函数
                    imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
                });

                function imgShow(outerdiv, innerdiv, bigimg, _this){
                    var src = _this.attr("src");//获取当前点击的pimg元素中的src属性
                    $(bigimg).attr("src", src);//设置#bigimg元素的src属性

                    /*获取当前点击图片的真实大小，并显示弹出层及大图*/
                    $("<img/>").attr("src", src).load(function(){
                        var windowW = $(window).width();//获取当前窗口宽度
                        var windowH = $(window).height();//获取当前窗口高度
                        var realWidth = this.width;//获取图片真实宽度
                        var realHeight = this.height;//获取图片真实高度
                        var imgWidth, imgHeight;
                        var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放

                        if(realHeight>windowH*scale) {//判断图片高度
                            imgHeight = windowH*scale;//如大于窗口高度，图片高度进行缩放
                            imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度
                            if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度
                                imgWidth = windowW*scale;//再对宽度进行缩放
                            }
                        } else if(realWidth>windowW*scale) {//如图片高度合适，判断图片宽度
                            imgWidth = windowW*scale;//如大于窗口宽度，图片宽度进行缩放
                            imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度
                        } else {//如果图片真实高度和宽度都符合要求，高宽不变
                            imgWidth = realWidth;
                            imgHeight = realHeight;
                        }
                        $(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放

                        var w = (windowW-imgWidth)/2;//计算图片与窗口左边距
                        var h = (windowH-imgHeight)/2;//计算图片与窗口上边距
                        $(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性
                        $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg
                    });

                    $(outerdiv).click(function(){//再次点击淡出消失弹出层
                        $(this).fadeOut("fast");
                    });
                }

                $("#add_goods").click(function(){
                    layer.open({
                        type: 2,
                        title: '添加新商品',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['600px', '65%'],
                        content: '/shop/goods_add'
                    });
                })

                $(".link_goods").click(function(){
                    var goodsId = $(this).attr('data-id');
                    layer.open({
                        type: 2,
                        title: '关联ERP SKU',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['600px', '85%'],
                        content: '/shop/link_erp_goods_spec?goodsId='+goodsId
                    });
                })

                //
                $(".goodsNum_upd").click(function(){
                    var id = $(this).attr('data-id');
                    var obj = $(this).siblings('span').eq(0);
                    var goodsNum = $(this).attr('goodsNum');
                    layer.prompt({
                        formType: 3,
                        value: goodsNum,
                        title: '请输入商品编码'
                    }, function(value, index, elem){
                        var data = {id:id, goodsNum:value};
                        $.ajax({
                            url: "/shop/up_goodsNum_ajax",
                            type: "POST",
                            dataType: "JSON",
                            contentType: 'application/json',
                            data:JSON.stringify(data),
                            success: function (res) {

                                if(res.code == 0){

                                    $(obj).text(value);
                                    layer.close(index)
                                    layer.msg(res.msg);
                                    // location=location;
                                }else
                                    layer.alert(res.msg);
                            }
                        });
                });
            });//修改结束


                //点击显示所有
                $(".show_sku").click(function(){
                    var obj = $(this);
                    var show =$(this).attr('status');
                    if(show == 0){
                        $(this).parent().siblings('ul').children('li').removeClass('yinc');
                        obj.text("点击隐藏");
                        obj.attr('status',"1");
                    }
                    if(show == 1){
                        $(this).parent().siblings('ul').children('li').addClass('yinc');
                        obj.text("点击显示");
                        obj.attr('status',"0");
                    }
                })

            })

            
            //修改备注
            $(".goods_remark").click(function(){
                    var id = $(this).attr('data-id');
                    var remark = $(this).attr('remark');
                    var obj = $(this).siblings('b').eq(0);

                    layer.prompt({
                        formType: 2,
                        value: remark,
                        title: '请输入备注内容'
                    }, function(value, index, elem){
                        var data = {id:id, remark:value};
                        $.ajax({
                            url: "/shop/up_goods_remark_ajax",
                            type: "POST",
                            dataType: "JSON",
                            contentType: 'application/json',
                            data:JSON.stringify(data),
                            success: function (res) {

                                if(res.code == 0){

                                    $(obj).text(value);
                                    layer.close(index)
                                    layer.msg(res.msg);
                                    // location=location;
                                }else
                                    layer.alert(res.msg);
                            }
                        });
                });
            });//修改结束

            
            //修改累计销量
            $(".totalSales_edit").click(function(){
                    var id = $(this).attr('data-id');
                    var totalSales = $(this).attr('totalSales');
                    var obj = $(this).siblings('span').eq(0);

                    layer.prompt({
                        formType: 3,
                        value: totalSales,
                        title: '请输入累计销量'
                    }, function(value, index, elem){
                        var data = {id:id, totalSales:value};
                        $.ajax({
                            url: "/shop/up_totalSales_ajax",
                            type: "POST",
                            dataType: "JSON",
                            contentType: 'application/json',
                            data:JSON.stringify(data),
                            success: function (res) {

                                if(res.code == 0){

                                    $(obj).text(value);
                                    layer.close(index)
                                    layer.msg(res.msg);
                                    // location=location;
                                }else
                                    layer.alert(res.msg);
                            }
                        });
                });
            });//修改结束
            //修改发布时间
            $(".publishTime_edit").click(function(){
                    var id = $(this).attr('data-id');
                    var publishTime = $(this).attr('publishTime');
                    var obj = $(this).siblings('b').eq(0);

                    layer.prompt({
                        formType: 3,
                        value: publishTime,
                        title: '请输入发布时间'
                    }, function(value, index, elem){
                        var data = {id:id, publishTime:value};
                        $.ajax({
                            url: "/shop/up_publish_time_ajax",
                            type: "POST",
                            dataType: "JSON",
                            contentType: 'application/json',
                            data:JSON.stringify(data),
                            success: function (res) {

                                if(res.code == 0){

                                    $(obj).text(value);
                                    layer.close(index)
                                    layer.msg(res.msg);
                                    // location=location;
                                }else
                                    layer.alert(res.msg);
                            }
                        });
                });
            });//修改结束

            $(".isOnsale").click(function(e){
                var id = $(this).attr('goodsId');
                var isOnsale = $(this).attr("isOnsale");
                var obj = $(this);
                if(confirm("确认变更上架状态吗？")){
                    var data = {id:id}; 
                    $.ajax({
                            url: "/shop/up_isOnsale_ajax",
                            type: "POST",
                            dataType: "JSON",
                            contentType: 'application/json',
                            data:JSON.stringify(data),
                            success: function (res) {

                                if(res.code == 0){
                                    if( isOnsale == 1)
                                        $(obj).siblings('span').eq(0).text('已下架');
                                    if( isOnsale == 0)
                                        $(obj).siblings('span').eq(0).text('已上架');    
                                    $(obj).remove();
                                 
                                    layer.msg(res.msg);
                                    // location=location;
                                }else
                                    layer.alert(res.msg);
                            }
                        });
                }
            })


            //管理erp系统商品
            $(".order_send").click(function (e) {

                e.stopPropagation();
                e.preventDefault();
                var id = $(this).attr('data-id');
                Tips.confirm({
                    title: '关联ERP系统商品  ',
                    content: $('#send-goods').html(),
                    define: function () {
                        var data = {
                            id: id,
                            code: $("input[name='express_code']").val()
                        };
                        $.ajax({
                            url: "/shop/link_erp_goods_spec_ajax",
                            type: "POST",
                            dataType: 'json',
                            contentType: 'application/json',
                            data: JSON.stringify(data),
                            success: function (res) {
                                if (res.code == 0) {
                                    Tips.alert('成功', function () {
                                        location.reload(true);
                                    });
                                } else {
                                    Tips.alert(res.msg);
                                }
                            }
                        });
                    }
                });

                });

                $("#upd_order").click(function () {
                    
                    let startTime = $("#startTime").val();
                    let endTime = $("#endTime").val();
                    let shopId = $("#shopId").val();
                    
                    if(shopId==0||shopId == ''||shopId =='null'||shopId==null) {alert("请选择店铺");return;}

                    $("#upd_order").hide();
                    $("#upd_order_").show();
                    let data = {
                        startTime:startTime,
                        endTime:endTime,
                        shopId:shopId
                    };
                    $.ajax({
                        url: "/ajax_pdd/pull_goods_list",
                        type: "POST",
                        dataType: "JSON",
                        data:JSON.stringify(data),
                        contentType: 'application/json',
                        success: function (res) {
                            if (res.code == 0) {
                                alert(res.msg);
                                location.reload(true);
                            }else if(res.code==601){
                                alert(res.msg);
                                location.href = "/pdd/oauth?shopId="+shopId;
                            }else {
                                Tips.alert(res.msg);
                            }
                            $("#upd_order").show();
                            $("#upd_order_").hide();
                        }
                    })
                });


        });

    </script>

</div>
</body>
<html>
